<!--
 * @Author: licongwei
 * @Date: 2022-03-16 14:02:20
 * @FileDescription: 地图
-->
<template>
  <div class="map">
    <div class="label" v-html="label"></div>
    <charts :params="params"></charts>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import httpRequest from '@/service'
import { gradientColor } from '@/charts/utils'
interface IChartState {
  label: string
  params: any
  getData: (shopId: string) => void
}
export default defineComponent({
  name: 'cMap',
  props: {
    shopId: {
      type: String,
      default: ''
    }
  },
  emit: ['change'],
  setup(props, { emit }) {
    // 地图
    const mapState: IChartState = reactive({
      label: '',
      params: {
        loading: true,
        map: {
          value: '数量'
        },
        adcode: '650000',
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          dataZoom: {
            disabled: true
          },
          xAxis: {
            disabled: true
          },
          yAxis: {
            disabled: true
          },
          visualMap: [
            {
              type: 'piecewise',
              pieces: [],
              show: true,
              right: 20,
              bottom: 50,
              align: 'left',
              orient: 'vertical',
              itemWidth: 30,
              itemHeight: 15,
              showLabel: true,
              itemGap: 5,
              textStyle: {
                color: '#fff',
                fontSize: 16
              },
              outOfRange: {
                color: '#def1ff'
              }
            }
          ],
          legend: {
            show: false
          },
          tooltip: {
            show: false
          },
          geo: [
            {
              map: '650000',
              roam: false,
              top: '14%',
              left: '11%',
              aspectScale: 0.85,
              zoom: 1.2,
              label: {
                show: true,
                color: '#fff',
                fontSize: 18,
                fontFamily: 'AliHYAiHei',
                formatter: (params: any) => {
                  let result = ''
                  let itemdata = mapState.params.options.series[0].data.filter(
                    (item: any) => {
                      return item.name === params.name
                    }
                  )[0]
                  let value = itemdata ? itemdata.value : 0
                  result = `{name|${params.name}}\n{value|${
                    value === 0 ? '' : value
                  }}`
                  return result
                },
                rich: {
                  name: {
                    fontSize: 18,
                    lineHeight: 24,
                    fontWeight: 'normal',
                    fontFamily: 'AliHYAiHei',
                    textShadowColor: 'rgba(0,0,0,.5)',
                    textShadowBlur: 10,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 5
                  },
                  value: {
                    fontSize: 20,
                    lineHeight: 24,
                    fontWeight: 'normal',
                    fontFamily: 'AliHYAiHei',
                    color: '#ffc22f',
                    textShadowColor: 'rgba(0,0,0,.5)',
                    textShadowBlur: 5,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0
                  }
                }
              },
              itemStyle: {
                areaColor: '#17adbc',
                borderColor: '#fff',
                borderWidth: 2,
                shadowColor: 'rgba(0,0,0,0.6)',
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5
              },
              emphasis: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 18,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 20,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              },
              select: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 18,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 20,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              },
              z: 3
            }
          ],
          series: [
            {
              type: 'map',
              map: '650000',
              geoIndex: 0,
              aspectScale: 0.85,
              zoom: 1.2,
              data: []
            },
            {
              type: 'map',
              map: '650000',
              aspectScale: 0.85,
              zoom: 1.2,
              top: '15%',
              left: '12%',
              silent: true,
              itemStyle: {
                areaColor: '#064c8c',
                borderColor: 'rgba(255,255,255,0.5)',
                borderWidth: 1,
                shadowColor: 'rgba(0,0,0,1)',
                shadowBlur: 20,
                shadowOffsetX: 5,
                shadowOffsetY: 5
              }
            }
          ]
        },
        event: {
          click: (params: any) => {
            // adcode.value =
            //   adcode.value === params.data.adcode
            //     ? '650000'
            //     : params.data.adcode
            emit('change', params.data.adcode, params.name)
          }
        },
        custom: true
      },
      getData: (shopId) => {
        mapState.params.loading = true
        httpRequest
          .get({ url: 'M3P1Map', params: { shopId: shopId } })
          .then((res) => {
            mapState.label = res.label
            if (res.code === 200) {
              if (res.pieces.length === 1 && !res.pieces[0].max) {
                const pie = { ...res.pieces[0], max: '10' }
                mapState.params.options.visualMap[0].pieces = [pie]
              } else {
                mapState.params.options.visualMap[0].pieces = res.pieces
              }
              mapState.params.options.series[0].data = res.data
            } else {
              mapState.params.options.visualMap[0].pieces = [
                { color: '#18bed8', max: 10, min: 0 }
              ]
              mapState.params.options.series[0].data =
                mapState.params.options.series[0].data.map((i: any) => {
                  i.value = 0
                  return i
                })
            }
            mapState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    mapState.getData(props.shopId)
    watch(
      () => props.shopId,
      (val) => {
        mapState.getData(val)
      }
    )
    return {
      ...toRefs(mapState)
    }
  }
})
</script>
<style lang="less" scoped>
.map {
  position: relative;
  height: 100%;
  .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #34bbed;
    font-size: 18px;
    padding: 10px 100px;
    line-height: 30px;
    background-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(5, 85, 153, 0.6) 50%,
      transparent 100%
    );
    &::v-deep(span) {
      color: #ffde00;
      font-family: 'AliHYAiHei';
      margin: 0 8px;
    }
  }
}
</style>
